<template>
	<view class="table page bgf7 pt15">
		<view class="infobox mx12">
			<image class="bg r8" src="/static/img/bg/card_bg2.png" mode="aspectFill"></image>
			<view class="px12 py16 rel flex">
				<view class="flex1">
					<view class="fs11">{{shop_name}}</view>
					<view class="fs20 bold6 mt8">{{name}}</view>
				</view>
				<view class="flex1 price-btn">
					<view class="timebox dinline px13 py6 r5 fs11 bold6">
						<text>￥</text>
						<text class="fs21">{{price}}</text>
						<text>/小时</text>
					</view>
				</view>
				
			</view>
		</view>		
		
		<view class="bgf7 px12 pt12 pb20">
			<text class="bold6 fs15">时长选择：</text>
			<view class="list flex flexC flexW flexB mt8">
				<view v-for="(item,index) in 8" @click="clickHour(index)"  class="item r4 fs14 py20 mb7 aliC" :class="currentIndex == index ? 'active' : ''">
					<text class="bold6 fs20 c33">{{index+1}}</text>
					<text class="c66">小时开台</text>
				</view>
			</view>
			
			<text class="bold6 fs15">套餐选择：</text>
			<view class="flex flexC mb6">
				<view v-if="set.length>0" style="width: 100%;">
					<scroll-view class="scroll-view" scroll-x="true" @scroll="scrollHandler">
					    <view class="card-container">
							<view class="card" v-for="(item, index) in set" :key="index" @click="doSetSelect(index)" 
							:class="index == selectSetIndex ? 'active' : 'bgff'">
								<text class="card-title">{{ item.name }}</text>
								<br>
								<text class="card-content">￥{{ item.amount }}元</text>
							</view>
					    </view>
					</scroll-view>
					
				</view>
				<view v-else>
					<text>暂无套餐</text>
				</view>
			</view>
			
			<view class="fs14 bold6 c33 mt22">温馨提示：</view>
			<view class="c66 fs14 mt8">定时开台为预付费，提前结束不退费</view>
			<view class="py40"></view>
		</view>
		
		<view class="fixed bgff px17 pb20 pt10">
			<view class="flex flexC">
				<view class="flex1 bg00 fs12 cff pl16 pr10 py2">
					<view class="">
						<text>合计：</text>
						<text class="cfad fs11">￥</text>
						<text class="cfad fs15 bold6">{{total}}</text>
					</view>
					<view class="">
						<text>需支付</text>
					</view>
				</view>
				<view class="btn px16 py2 fs16 c00 bold6" @click="addOrder">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_name:'',
				name:'',
				id:'',
				price:'',
				currentIndex:0,
				selectSetIndex:-1,
				hour:1,
				setId:-1,
				total:0,
				order_no:'',
				setList:[],
				setId:-1,
				set:[],

			};
		},
		onLoad(option) {
			this.shop_name = decodeURIComponent(option.shop_name);
			this.name = decodeURIComponent(option.name);
			this.id = option.id;
			this.price = option.price;
			this.total = this.price;
			this.getSetList();
		},
		onShow() {
			this.currentIndex = 0;
			this.selectSetIndex = -1;
			this.setId = -1;
			this.hour = 1;
			this.total =  this.hour * this.price;
			console.info("total=====>>"+this.total);
			this.total = this.total.toFixed(2);
			this.initTable();
		},
		methods:{

			getSetList(){
				let param = {
					table_id: this.id,
				};
				let that = this;
			
				this.$api.getTableSetList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.setList = res.data;
						// if(that.setList.length >0){
						// 	that.setId = that.setList[0].id;
						// 	that.total = that.setList[0].amount;
						// }
					} else {
					
					}
				})		
			},
			
			scrollHandler(e){
				console.log('滚动事件', e.detail);
			},

			addOrder(){
				let param = {
					id: this.id,
					hour:this.hour,
					setId:this.setId,

				};
				let that = this;
				if (this.isPaying == true) return;
				this.isPaying = true;
				this.$api.addOrderHour(param).then(res => {
					console.info(JSON.stringify(res));
					this.isPaying = false;
					if (res.code == 1) {
						that.order_no = res.data.order_no;
						if (res.data.payInfo != '') {
							that.wechatPay(res.data.payInfo)
						} else {
							uni.redirectTo({
								url: '../order/tableDetail?order_no=' + that.order_no
							})
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})	
					
			},
			
			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
			
						uni.redirectTo({
							url: '../order/tableDetail?order_no=' + that.order_no
						})
			
					},
					fail: function(err) {
						that.restore();
						uni.showToast({
							title: "取消开台",
							icon: 'none'
						});
					}
				});
			},
			
			clickHour(index){
				this.currentIndex = index;
				this.selectSetIndex = -1;
				this.setId = -1;
				this.hour = index+1;
				this.total =  this.hour * this.price;
				console.info("total======"+this.total);
				this.total = this.total.toFixed(2);
			},
			
			clickHour2(index){
				this.currentIndex = index;
				this.hour = this.setList[index].hour;
				this.total =  this.setList[index].amount;
				this.setId = this.setList[index].id;
				console.info("total======"+this.total);
				this.total = this.total.toFixed(2);
			},
			
			//选择套餐
			doSetSelect(index) {
				console.log("====选择套餐："+index);
				this.currentIndex = -1;
				this.selectSetIndex = index;
				this.hour = this.set[index].hour;
				this.setId = this.set[index].id;
				this.total = this.set[index].amount;
			},
			
			initTable(){
				let param = {
					id: this.id,
				};
				let that = this;
				this.$api.initTableSet(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.set = res.data;
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})	
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.table {
	
	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		box-sizing: border-box;
		overflow: hidden;
		box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, .1);
		.bg00 {
			height: 90rpx;
			border-radius: 80rpx 0 0 80rpx;
		}
		.cfad {
			color: #FAD00D;
		}
		.btn {
			height: 90rpx;
			border-radius: 0 80rpx 80rpx 0;
			line-height: 90rpx;
			background-color: #FAD00D;
		}
	}
	
	.nowrap {
		white-space: nowrap;
	}
	
	.list {
		.item {
			width: calc(50% - 10rpx);
			border: 2rpx solid #CBCBCB;
			background-color: #FFF;
			&.active {
				border: 2rpx solid #FAD00D;
				background-color: #FFF9CD;
				.c33,.c66 {
					color: #F79F15;
				}
			}
		}
	}
	.infobox {
		position: relative;
		color: #5E3612;
		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		.rel {
			position: relative;
			z-index: 1;
		}
		.timebox {
			background-color: rgba(255,255,255,.5);
		}
	}
	
	.scroll-view {
	  width: 100%;
	  height: 80px;
	  background-color: #f0f0f0;
	  overflow: hidden;
	  white-space: nowrap;
	}
	
	.card-container {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		padding: 10px;
	}
	
	.card {
	  width: 90px;
	  height: 60px;
	  margin-right: 10px;
	  background-color: #ffffff;
	  border-radius: 8px;
	  padding: 10px;
	  box-sizing: border-box;
	  // flex: 1;
	}
	.card-title {
	  font-size: 14px;
	  color: #333;
	  margin-top: 5px;
	}
	
	.card-content {
	  font-size: 12px;
	  color: #666;
	  margin-top: 5px;
	}
	.active {
		background: #F8B62B;
		color: #fff;
	}
	.price-btn{
		margin-top: auto
	}
}
</style>
